---
id: 637f702872c65bc8e73dfe33
videoId: ta3Oxx7Yqbo
title: Посилання та зображення. Запитання D
challengeType: 15
dashedName: links-and-images-question-d
---

# --description--


Загалом існує два типи посилань, які ви створите:

- Посилання на сторінки інших вебсайтів в інтернеті

- Посилання на сторінки ваших вебсайтів


## Абсолютні посилання
Посилання на сторінки інших вебсайтів в інтернеті називаються абсолютними посиланнями. Зазвичай абсолютне посилання складається з наступних частин: `protocol://domain/path`. Абсолютне посилання завжди міститиме протокол та домен місця призначення.

Ви вже бачили абсолютне посилання в дії. Посилання на головну сторінку проєкту Odin є абсолютним посиланням, оскільки воно містить протокол та домен.

`https://www.theodinproject.com/about`

## Відносні посилання
Посилання на іншу сторінку власних вебсайтів називаються відносними посиланнями. Відносні посилання не містять домену, оскільки це інша сторінка на тому ж сайті, тому назва домену буде одинаковою.

Відносні посилання містять лише шлях до файлу до іншої сторінки відносно сторінки, на яку ви посилаєте. Це досить абстрактно, тому розглянемо приклад.

В межах каталогу `odin-links-and-images` створіть ще один файл HTML під назвою `about.html` та вставте у нього наступний код:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Odin Links and Images</title>
  </head>

  <body>
    <h1>About Page</h1>
  </body>
</html>
```

Назад до сторінки `index`: додайте наступний елемент посилання, щоб створити посилання на сторінку `about`:

```html
<body>
  <h1>Homepage</h1>
    <a href="https://www.theodinproject.com/about">click me</a>

    <a href="about.html">About</a>
</body>
```

Відкрийте файл `index.html` у браузері та натисніть на посилання, щоб перевірити, що все працює правильно. Натиснувши на посилання, ви повинні перейти на щойно створену сторінку `about`.

Все працює, оскільки `index` та сторінка `about` знаходяться в одному каталозі. Це означає, що ви можете використати назву (`about.html`) як значення `href`.

Однак зазвичай потрібно організувати каталоги кращим способом. Зазвичай ви б мали тільки `index.html` у кореневому каталозі, а всі інші файли HTML мали власні каталоги.

Створіть новий каталог під назвою `pages` в межах каталогу `odin-links-and-images` та перемістіть файл `about.html` до нового каталогу.

Оновіть сторінку `index` у браузері та натисніть посилання `about`. Зараз воно буде недійсним. Причина в тому, що змінилось розташування сторінки `about`.

Щоб виправити це, вам просто потрібно оновити значення `href` посилання `about`, щоб включити каталог `pages/`, оскільки це нове розташування файлу `about.html` відносно файлу `index.html`.

```html
<body>
  <h1>Homepage</h1>
  <a href="pages/about.html">About</a>
</body>
```

Оновіть сторінку `index` у браузері та спробуйте знову натиснути посилання `about`, зараз воно має працювати.

У більшості випадків все працюватиме. Однак іноді ви можете натрапити на непередбачувані проблеми. Якщо додати `./` перед посиланням, проблем можна уникнути. Додаючи `./` ви вказуєте коду, що він повинен шукати файл/каталог, відносно до **поточного** каталогу.

```html
<body>
  <h1>Homepage</h1>
  <a href="./pages/about.html">About</a>
</body>
```

# --assignment--

Перегляньте відео Кевіна Павелла про структуру файлів у HTML.

# --question--

## --text--

Яка різниця між абсолютним та відносним посиланням?

## --answers--

Абсолютне посилання — посилання на іншу сторінку поточного вебсайту. Відносне посилання — посилання на інший вебсайт.

---

Абсолютне посилання — посилання на інший вебсайт. Відносне посилання — посилання на іншу сторінку поточного вебсайту.

---

Між абсолютним та відносним посиланням немає різниці.

## --video-solution--

2
